<template>
  <div>
  <h3>songpage----{{ id }}</h3>
  <audio src="http://m701.music.126.net/20230221124952/fd0eb1c8cccc3975d21ab71f82c6d5a6/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/24879327447/5d24/705d/7139/455f01d8189c512ab8268642113d9152.m4a" controls></audio>
<aplayer :music="audio" :showLrc="true" />
  </div>
</template>

<script>
import aplayer from 'vue-aplayer'
export default {
  data(){
    return{
      audio:{
  title: 'Preparation',
  artist: 'Hans Zimmer/Richard Harvey',
  src: "http://m701.music.126.net/20230221124952/fd0eb1c8cccc3975d21ab71f82c6d5a6/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/24879327447/5d24/705d/7139/455f01d8189c512ab8268642113d9152.m4a",
  pic: 'http://devtest.qiniudn.com/Preparation.jpg',
  lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
},
      songPage:[]
    }
  },
  components:{
    aplayer
  },
props:['id'],
created(){
  this.getSongPage()
  ,this.getLyric()
},
methods:{
 async getSongPage(){
  const {data:res} = await this.$api.songPage()
  console.log(res);
  this.songPage=res.data[0].url
 this.audio.src =  res.data[0].url
  },
  async getLyric(){
    const{data:res} = await this.$api.getLyric({id:this.id})
    console.log(res.lrc.lyric);
   this.audio.lrc= res.lrc.lyric
  }
}
}
</script>

<style>

</style>